<script setup>
  import {ref} from 'vue'

</script>

<template>
  <div class="app-container">
    <!-- 使用el-row和el-col布局，创建个人信息和基本资料两个区域 -->
    <el-row :gutter="20">
      <!-- 个人信息区域 -->
      <el-col :span="6">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          
          <div>
            <!-- 列表形式展示用户信息 -->
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon="user"/>&nbsp;&nbsp;用户名称
                <div class="pull-right">{{ 11 }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon="phone"/>&nbsp;&nbsp;手机号码
                <div class="pull-right">{{ 22 }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon="email"/>&nbsp;&nbsp;用户邮箱
                <div class="pull-right">{{ 22 }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon="peoples"/>&nbsp;&nbsp;所属角色
                <div class="pull-right"></div>
              </li>
              <li class="list-group-item">
                <svg-icon icon="date"/>&nbsp;&nbsp;创建日期
                <div class="pull-right">{{2 }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <!-- 基本资料区域 -->
      <el-col :span="18">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template>
          <!-- 使用el-tabs切换基本资料和修改密码两个面板 -->
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">基本资料</el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">修改密码</el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div class="form-container">
      <svg t="1735020765268" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1802" width="16" height="16"><path d="M510.640128 961.492992c-52.737024 0-105.480192 0.4864-158.209024-0.176128-33.453056-0.41984-66.941952-1.744896-100.307968-4.149248-30.210048-2.176-60.20608-6.822912-88.389632-18.924544-15.821824-6.79424-29.564928-16.32256-38.11328-31.949824-5.10976-9.341952-6.844416-19.428352-7.215104-29.928448-1.999872-56.690688 8.658944-110.560256 36.521984-160.355328 36.207616-64.708608 89.240576-110.261248 158.334976-137.039872 35.66592-13.822976 72.818688-19.884032 110.971904-19.946496 58.596352-0.09728 117.194752-0.226304 175.79008 0.024576 77.71136 0.331776 146.507776 25.283584 204.837888 76.88192 52.026368 46.022656 84.265984 103.573504 96.544768 172.123136 4.393984 24.527872 5.156864 49.29024 3.831808 74.042368-1.179648 22.030336-13.51168 37.588992-31.90272 48.697344-18.778112 11.342848-39.663616 16.728064-60.939264 20.617216-50.7904 9.283584-102.219776 9.67168-153.592832 10.089472-49.385472 0.401408-98.776064 0.08704-148.164608 0.08704C510.640128 961.554432 510.640128 961.523712 510.640128 961.492992z" fill="#272636" p-id="1803"></path><path d="M743.45984 302.084096c0.00512 99.448832-66.358272 190.094336-166.555648 222.247936-127.627264 40.956928-262.672384-28.754944-303.246336-154.348544-29.89568-92.540928 2.199552-195.596288 78.990336-255.511552 36.810752-28.721152 78.312448-46.01856 124.691456-50.83648 121.04192-12.573696 229.308416 64.713728 258.569216 176.9216C740.919296 259.770368 743.228416 279.3216 743.45984 302.084096z" fill="#272636" p-id="1804"></path></svg>
      &nbsp;用户头像
      <!-- 使用el-upload组件实现图片上传功能 -->
      <el-upload
          name="avatar"
          :headers="headers"
          class="avatar-uploader"

          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
      >
        <!-- 如果imageUrl有值，则显示上传的图片 -->
        <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
        <!-- 否则显示一个上传图标 -->
        <el-icon v-else class="avatar-uploader-icon">
          <Plus/>
        </el-icon>
      </el-upload>
      <!-- 提交按钮，点击时触发handleConfirm方法 -->
      <el-button @click="handleConfirm">确认更换</el-button>
    </div>
</template>

<style scoped lang="scss">
  .list-group-striped > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .list-group-item {
    border-bottom: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 11px 0;
    font-size: 13px;
  }

  .pull-right {
    float: right !important;
  }

  ::v-deep .el-card__body {
    height: 230px;
  }

  ::v-deep .box-card {
    height: 450px;
  }
</style>
